<template>
  <div class="stats-overview">
    <!-- 核心指标卡片区 -->
    <el-row :gutter="24" class="card-row">
      <el-col v-for="item in keyMetrics" :key="item.title" :span="6">
        <el-card class="metric-card" shadow="hover">
          <div class="metric-title">{{ item.title }}</div>
          <div class="metric-value" :style="{ color: item.color }">
            {{ item.value }}
            <span class="metric-unit">{{ item.unit }}</span>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="32" style="margin-top:32px;">
      <el-col :span="16">
        <el-card>
          <div class="chart-title">本年度各月业务数据趋势</div>
          <div ref="lineRef" style="width:100%;height:340px;"></div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card>
          <div class="chart-title">业务类型占比</div>
          <div ref="pieRef" style="width:100%;height:340px;"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'

// 核心指标卡片（模拟数据）
const keyMetrics = [
  { title: '累计修复项目', value: 54, unit: '个', color: '#409EFF' },
  { title: '年度废弃物利用量', value: '32,700', unit: '吨', color: '#67C23A' },
  { title: '年新增绿色建筑', value: 17, unit: '项', color: '#13C2C2' },
  { title: '业务满意度', value: '97.5', unit: '%', color: '#E6A23C' }
]

// 趋势图（年度业务数据，模拟）
const lineRef = ref<HTMLDivElement>()
const months = ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
const projectData = [2, 3, 5, 6, 7, 8, 6, 5, 4, 3, 3, 2]
const wasteData = [1200, 1800, 2400, 2600, 2700, 3000, 2800, 2700, 2200, 2100, 2000, 2000]

onMounted(() => {
  // 折线柱状复合图
  if (lineRef.value) {
    const chart = echarts.init(lineRef.value)
    chart.setOption({
      tooltip: { trigger: 'axis' },
      legend: { data: ['修复项目', '废弃物利用量'] },
      xAxis: { type: 'category', data: months },
      yAxis: [
        { type: 'value', name: '项目(个)' },
        { type: 'value', name: '利用量(吨)' }
      ],
      series: [
        {
          name: '修复项目',
          type: 'bar',
          data: projectData,
          yAxisIndex: 0,
          barWidth: 32,
          itemStyle: { color: '#409EFF' }
        },
        {
          name: '废弃物利用量',
          type: 'line',
          data: wasteData,
          yAxisIndex: 1,
          smooth: true,
          lineStyle: { width: 4, color: '#67C23A' }
        }
      ]
    })
  }
  // 饼图
  if (pieRef.value) {
    const pieChart = echarts.init(pieRef.value)
    pieChart.setOption({
      tooltip: { trigger: 'item' },
      legend: { bottom: 8 },
      series: [{
        name: '类型占比',
        type: 'pie',
        radius: ['40%', '65%'],
        itemStyle: { borderRadius: 10, borderColor: '#fff', borderWidth: 2 },
        label: {
          show: true,
          formatter: '{b}\n{d}%',
          fontSize: 15
        },
        labelLine: {
          show: true,
          length: 18,
          length2: 14,
          smooth: true
        },
        labelLayout: { hideOverlap: true, moveOverlap: 'shiftY' },
        data: [
          { value: 41, name: '修复业务' },
          { value: 26, name: '绿色建筑' },
          { value: 21, name: '废弃物利用' },
          { value: 12, name: '其他' }
        ]
      }],
      color: ['#409EFF', '#67C23A', '#E6A23C', '#13C2C2']
    })
  }
})
const pieRef = ref<HTMLDivElement>()
</script>

<style scoped>
.stats-overview {
  width: 100%;
  margin: 0;
  padding: 32px 0;
}
.card-row {
  margin-bottom: 8px;
}
.metric-card {
  text-align: center;
  border-radius: 18px;
  background: linear-gradient(120deg,#fff 75%,#e7fbee 100%);
  box-shadow: 0 2px 12px #0001;
  min-height: 120px;
  margin-bottom: 16px;
}
.metric-title {
  font-size: 15px;
  color: #888;
  margin-top: 10px;
}
.metric-value {
  font-size: 34px;
  font-weight: bold;
  margin-top: 10px;
}
.metric-unit {
  font-size: 16px;
  margin-left: 4px;
  color: #888;
}
.chart-title {
  font-size: 17px;
  color: #222;
  font-weight: bold;
  margin-bottom: 16px;
}
</style>
